<div class="l-wrapper" (clickOutside)="onClose()">
    <button type="button" class="l-dropdown-button" (click)="toggleList()">
        <span class="l-bound-text l-bound-double-text" [class.selected]="selectedWasOnly">WAS<br>ONLY</span>
        <span class="l-bound-text"><img [src]="bidirectionalImgSrc" width="18px" height="18px"></span>
        <span>
            <span class="l-bound-text"><span class="fas fa-sign-in-alt"></span> {{selectedInbound}}</span>
            <span class="l-bound-text"><span class="fas fa-sign-out-alt"></span> {{selectedOutbound}}</span>
            <span class="fas fa-angle-down"></span>
        </span>
    </button>
    <div class="l-dropdown-menu-wrapper" [hidden]="hideList">
        <dl class="l-inbound-list">
            <dt class="l-bound-title">Inbound</dt>
            <dd *ngFor="let inbound of inboundList" class="l-bound-list-item"
                [class.active]="selectedInbound === inbound" (click)="onSelectInbound(inbound)">{{inbound}}</dd>
        </dl>
        <dl class="l-outbound-list">
            <dt class="l-bound-title">Outbound</dt>
            <dd *ngFor="let outbound of outboundList" class="l-bound-list-item"
                [class.active]="selectedOutbound === outbound" (click)="onSelectOutbound(outbound)">{{outbound}}</dd>
        </dl>
        <dl class="l-inbound-list">
            <dt class="l-bound-title l-last-title">WAS ONLY</dt>
            <dd class="l-was-only-selector" (click)="onChangeWasOnly()">
                <i class="fas fa-check-square" [class.selected]="selectedWasOnly"></i>
            </dd>
        </dl>
        <dl class="l-outbound-list">
            <dt class="l-bound-title l-last-title">Bidirectional</dt>
            <dd class="l-bidirectional-selector" (click)="onChangeBidirectional()"><img [src]="bidirectionalImgSrc"
                                                                                        width="22px" height="22px"></dd>
        </dl>
        <div class="l-button-group-wrapper">
            <button class="btn l-cancel-button" (click)="onCancel()">Cancel</button>
            <button class="btn l-apply-button" (click)="onApply()">Apply</button>
        </div>
    </div>
</div>
    